$font-color: #2c2c35;
$sub-font-color: #7b8196;
$active-color: #f54305;
.page-subscriber {
	.subscriber-header {
		background-color: $fill-base;
		padding: 24rpx 30rpx;
		.subscriber-header--box {
			position: relative;
			width: 690rpx;
			height: 270rpx;
			.subscriber-header--background {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 690rpx;
				height: 270rpx;
			}

			.subscriber-header--tip {
				position: absolute;
				bottom: 37rpx;
				right: 51rpx;
				color: #fdd4cc;
				font-size: 24rpx;
			}
		}
	}

	.subscriber-body {
		background-color: $fill-base;
		padding: 30rpx 30rpx 34rpx;
		.subscriber-join--header {
			font-size: 34rpx;
			color: #2c2c35;
			margin-bottom: 34rpx;
		}

		.subscriber-join-btn--box {
			width: 690rpx;
			height: 130rpx;
			background-color: #ffffff;
			box-shadow: 0px 7rpx 10rpx 0px rgba(118, 118, 118, 0.13);
			border-radius: 10rpx;
		}

		.subscriber-join-content {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 30rpx;
			line-height: 30rpx;
			padding: 50rpx 36rpx;

			.join-btn-txt {
				flex: 1;
				align-items: flex-start;
				color: #49af4f;
				&.join-btn-txt--year {
					flex: 0 0 124rpx;
					color: #2c2c35;
				}
				&.join-btn-txt--price {
					flex: 0 0 147rpx;
					color: $brand-primary;
				}
			}
			.join-btn-action {
				flex: 0 0 38rpx;
			}
			.join-btn-action--image {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}

	.subscriber-rule {
		background-color: $fill-base;
		padding: 24rpx 30rpx;
		.rule-header {
			font-size: 26rpx;
			color: #2c2c35;
		}
		.rule-content {
			padding: 29rpx 0;
			font-size: 26rpx;
			line-height: 20px;
			color: #7b8196;
		}
	}
}
